/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { forwardRef, useState, useCallback, useEffect } from 'react'
import { Select, Tabs, Row, Col } from 'antd'
import styles from './BrandSelect.less'

const { TabPane } = Tabs

const BrandSelect = forwardRef((props, ref) => {
  const { disabled, brandList, value, setValue } = props
  const [data, setData] = useState(undefined)
  const [open, setOpen] = useState(false)

  useEffect(() => {
    setData(value)
  }, [value])

  const onClick = useCallback(
    (e) => {
      setData(e.target.textContent)
      setValue(e.target.textContent)
      setOpen(false)
      return false
    },
    [data],
  )

  return (
    <div
      onMouseDown={e => {
        e.persist()
        e.stopPropagation()
        const isSelectLable = e.target.className == "ant-select-selection__rendered"
        !disabled && isSelectLable && setOpen(!open)
      }}
    >
      <Select
        open={open}
        value={data}
        disabled={disabled}
        placeholder="从系统中选择"
        dropdownRender={() => (
          <Tabs defaultActiveKey="0">
            {
              brandList.map((item, index) => {
                return (
                  <TabPane tab={item.title} key={index}>
                    {
                      item.list.map((val, idx) => (
                        <Row align="middle" type='flex' style={{ marginLeft: 10 }} key={idx}>
                          {
                            val.map((value, i) => (
                              <Col key={i} className={styles.brand}>
                                <div onMouseUp={e => onClick(e)}>{value}</div>
                              </Col>
                            ))
                          }
                        </Row>
                      ))
                    }
                  </TabPane>
                )
              })
            }
          </Tabs>
        )}
      >
      </Select>
    </div>
  )
})

export default BrandSelect